<template>
  <div class="studyKeepAlive">
    <div class="flex">
      <span>输入框：</span><el-input v-model="value" placeholder="请输入内容" clearable />
    </div>
    <div>
      <a href="https://blog.csdn.net/jieyucx/article/details/131200202">学习地址</a>
    </div>
    <pre>
      1.什么是 keep-alive？
        Vue.js 中 keep-alive 是一个内置组件，可以在需要缓存的组件上添加keep-alive 标签，使得这个组件被缓存起来，不会被多次渲染和销毁。keep-alive 组件有两个独立的生命周期钩子，分别是 activated 和 deactivated。
      2.如何使用 keep-alive?
        在需要缓存的组件外部添加一个 keep-alive 标签，示例如下：
        <keep-alive>
          <router-view></router-view>
        </keep-alive> 
        这个例子中，我们将路由组件放到 keep-alive 标签内部，实现路由组件的缓存。
      3.keep-alive 的作用
        使用keep-alive可以有效地提高应用的性能。因为在组件被缓存的时候，即使组件被切换出去，它的状态依旧被保留。当再次切换到被缓存的组件时，不需要重新渲染和初始化组件，可以直接复用缓存的组件，从而加快页面的响应速度。
        除此之外，还可以结合 activated 和deactivated生命周期钩子实现一些额外的功能。例如，在组件离开缓存页面时，使用 deactivated 钩子进行数据的清理和状态的重置。当组件再次出现在缓存页面时，使用 activated 钩子进行数据的恢复和状态的还原
      4.keep-alive的include和exclude
        include 和 exclude 属性可以用来指定哪些组件需要被缓存，哪些组件不需要被缓存。
        include 属性可以指定需要缓存的组件名称，exclude 属性可以指定不需要缓存的组件名称。
        写法一，绑定一个数组：需要相应的组件名称和设定的一致
        <keep-alive :include="['Home', 'About']">
          <router-view></router-view>
        </keep-alive>
        写法二，绑定一个字符串：需要相应的组件名称和设定的一致
        <keep-alive :include="'Home'">
          <router-view></router-view>
        </keep-alive>
        写法三，绑定一个正则表达式：需要相应的组件名称和设定的一致
        <keep-alive :include="/^Home/">
          <router-view></router-view>
        </keep-alive>
      5.keep-alive的max属性
        max 属性可以用来指定最多可以缓存多少个组件实例。当缓存的组件实例数量超过 max 属性指定的数量时，最久没有被访问的组件实例会被销毁。
        <keep-alive :max="10">
          <router-view></router-view>
        </keep-alive>
      6.keep-alive的生命周期
        keep-alive 组件自身也有两个独立的生命周期钩子，分别是 activated 和 deactivated。这两个钩子会在组件被缓存和被激活时触发。
        activated 当组件被激活（使用）的时候触发 可以简单理解为进入这个页面的时候触发
        deactivated 当组件不被使用（inactive状态）的时候触发 可以简单理解为离开这个页面的时候触发
        
        具体生命周期执行顺序
        created,mounted,activated,deactivated钩子函数的执行顺序如下：
        初始进入和离开 created —> mounted —> activated --> deactivated
        后续进入和离开 activated --> deactivated
    </pre>
  </div>
</template>
<script>
export default {
  name: 'StudyKeepAlive',
  data() {
    return {
      value: null,
      refreshFlag: true,
    }
  },
  activated() {
    if (this.refreshFlag) {
      console.log('activated')
    }
  },
  deactivated() {
    this.refreshFlag = false
    console.log('deactivated')
  },
  beforeDestroy() {
    this.refreshFlag = true
  },
}
</script>
<style lang="less" scoped>
.bold{
  font-size: 20px;
  font-weight: 600;
}
.flex{
  display: flex;
  align-items: center;
  ::v-deep{
    .el-input{
      width: 200px;
    }
  }
}
</style>
